<!--
	
	jQuery
	整理
	
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@charset "utf-8";
			*{ padding: 0px;margin: 0px; }
			
			/* body的全局样式  */
			body{font-family:"微软雅黑";font-weight: normal;}
			
			/* dbody 居中 */
			.dbody{
				margin-left:auto;
				margin-right: auto;
				width: 960px;
				height: 10000px;
				border: #CCCCCC 1px solid;
				box-shadow: #CCCCCC 5px 5px 5px 5px;
				padding: 10px;
			}
			
			h1{
				color: red;
				width: 890px;
				height:50px;
				background-color:burlywood;
				box-shadow: #CCCCCC 3px 3px 3px;
				padding-left: 10px;
		    }
			
			pre{
				border: 1px #CCCCCC solid;
			}
			
			.divCss{
				border: 1px red solid;
			}
			
		</style>
		
		<!-- 使用google的api库 -->
		<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>-->
		
		<!-- 使用microsoft的api库 -->
		<!--<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>-->

		
		<!-- 引入 jQuery.js  -->
		<script type="text/javascript" src="../../lib/jq/jquery-1.11.3.min.js"></script>
		<!-- 在这里写 js 代码 -->
		<script type="text/javascript">
			// document加载完毕之后执行function
			$(document).ready(function(){
				// 1.通过id获得该标签，并且添加点击事件相应函数
				$("#p1").click(function(){
					alert("您点击了p标签！");
					$(this).hide();//this表示p标签本身
				});
				
				//2.全选CheckBox
				$("#checkAll").click(function(){
					alert($("#checkAll").prop("checked"));
					$("input[name='hobby']").prop("checked",this.checked);
				});
				
				//3. 获得 select 选的option信息
				$("#year").change(function(){
					alert(this.value);
				});
				//3.1 按钮点击事件获得select选择的值
				$("#getSelect").click(function(){
					var value = $("#year option:selected").val();
					alert(value);
				});
				
				// 2.1三个属性
				$("#text").click(function(){
					alert("text()==>"+$("#pt").text());
				});
				
				$("#htm").click(function(){
					alert("html()==>"+$("#pt").html());
				});
				
				$("#va").click(function(){
					alert("val()==>"+$("#testVal").val());
				});
				
				// 2.2 设置/获得 属性
				$("#testAttr").click(function(){
					alert("a标签的href："+$("#attr").attr("href"));//显示a标签的href属性
					$("#attr").attr("href","http://www.google.com");//改变a标签的href属性
				});
				
				// 2.3 添加元素
				var i = 1,j=1;//div内部之前和之后的标志位
				// div内部开头添加元素
				$("#addElementBefore").click(function(){
					$("#par").prepend("<p>开头新增第"+(i++)+"行</p>");
				});
				
				// div内部结尾添加元素
				$("#addElementAfter").click(function(){
					$("#par").append("<p>结尾新增第"+(j++)+"行</p>");
				});
				
				var m = 1,n=1;//div外部之后和之前的标志位
				// div 元素之前添加新元素
				$("#addBeforeDiv").click(function(){
					$("#par").before("<p>div之前新增第"+(m++)+"行</p>");
				});
				
				// div 元素之后添加新元素
				$("#addAfterDiv").click(function(){
					$("#par").after("<p>div之后新增第"+(n++)+"行</p>");
				});
				
				// 2.4 删除所有添加的元素
				// 删除所有的元素
				$("#removeAll").click(function(){
					$("#par p").remove();
					i=1;j=1;m=1;n=1;
				});
				
				// 删除所有的div里面开头新添加的元素
				$("#removeInnerDivBefore").click(function(){
					//首先获得div开头添加的所有元素
					$("#parP1").prevAll().remove();
					//$("#parP1").prevAll().eq(0).remove();//一个一个的删除
					i=1;
				});
				
				// 删除所有的div里面结尾新添加的元素
				$("#removeInnerDivAfter").click(function(){
					//首先获得div开头添加的所有元素
					$("#parP1").nextAll().remove();
					//$("#parP1").nextAll().eq(0).remove();//一个一个的删除
					j=1;
				});
				
				// 删除div外部所有的开头添加的元素
				$("#removeOutDivBefore").click(function(){
					$("#par").prevAll().remove();
					//$("#par").prevAll().eq(0).remove();//一个一个的删除
				});
				
				
				// 删除div外部所有的结尾添加的元素
				$("#removeOutDivAfter").click(function(){
					$("#par").nextAll().remove();
					//$("#par").nextAll().eq(0).remove();//一个一个的删除
				});
				
				
				// 3. CSS类
				// 添加样式
				$("#addStyleCss").click(function(){
//					$("#cssDiv p").addClass("divCss");//id 标签名
					$("#cssDiv #cssP").addClass("divCss");//id和内部p的id
				});
				
				// 删除样式
				$("#delStyleCss").click(function(){
					//$("#cssDiv p").removeClass("divCss");//id 标签名
					$("#cssDiv #cssP").removeClass("divCss");//id和内部p的id
				});
				
				// 添加/删除样式
				$("#toggleStyleCss").click(function(){
					//$("#cssDiv p").toggleClass("divCss");//id 标签名
					$("#cssDiv #cssP").toggleClass("divCss");//id和内部p的id
				});
				
				// 4. css()方法
				// 得到样式
				$("#getCss").click(function(){
					alert("background-color:"+$("#cssFunc").css("background-color"));
				});
				//改变样式
				$("#setCss").click(function(){
					$("#cssFunc").css("background-color","green");
				});
				
				// 7.1 隐藏/显示效果
				//隐藏
				$("#hideDiv").click(function(){
					$("#sh").hide(500);
				});
			
				//显示
				$("#showDiv").click(function(){
					$("#sh").show(500);
				});
				
				//隐藏/显示
				$("#toggleDiv").click(function(){
					$("#sh").toggle(500);
				});
				
				// 7.2 淡入/淡出效果
				//淡出
				$("#fadeOutDiv").click(function(){
					$("#io").fadeOut(500);
				});
				
				// 淡入
				$("#fadeInDiv").click(function(){
					$("#io").fadeIn(500);
				});
				
				//淡入淡出
				$("#fadeinoutDiv").click(function(){
					$("#io").fadeToggle(500);
				});
				
				//淡入到
				$("#fadeToDiv").click(function(){
					$("#io").fadeTo(200,0.5);
				});
				
				
				// 7.3 上滑/下滑 效果
				//上滑
				$("#downDiv").click(function(){
					$("#sx").slideUp(500);
				});
				
				// 下滑
				$("#upDiv").click(function(){
					$("#sx").slideDown(500);
				});
				
				//上滑/下滑 效果
				$("#downupDiv").click(function(){
					$("#sx").slideToggle(500);
				});
			
				// 7.4 动画效果
				//可执行队列动画,要使用left或者right，必须给div设置position
				$("#anima").click(function(){
					
					$("#an").animate({
						left:'250px',
						right:'250px',
						height:'200px',
						width:'200px',
						opacity:'0.5',
						fontSize:'2em'
					},1000);
					
					$("#an").animate({
						left:'0px',
						right:'0px',
						height:'100px',
						width:'100px',
						opacity:'1',
						fontSize:'1em'
					},1000);
				});
				
				// 7.5 停止动画
				
				//开始动画
				$("#animaStart").click(function(){
					$("#an").animate({
						opacity:'0.5',
						fontSize:'2em'
					},1000);
					$("#an").animate({
						opacity:'1',
						fontSize:'1em'
					},1000);
				});
				
				//停止动画
				$("#animaStop").click(function(){
					$("#an").stop();
				});
				
//					var url = "../TagNormal.html";
//					var arg = {"time":new Date(),"name":"bart"};
//				$("#getURL").load(url,arg,function(data){
//					
//						alert("data:"+data.length);
//					});
				
				
			});
			
			
		</script>
	</head>
	
	<body>
		<div class="dbody">
			
			<input type="button" value="get()" id="getURL"/>
			
			<h1>jQury的学习整理</h1>
			<p id="p1">测试点击事件，点击会后弹出提示框，并隐藏。</p>
			<h5>源码：</h5>
			<pre>
				$(document).ready(function(){
					// 通过id获得该标签，并且添加点击事件相应函数
					$("#p1").click(function(){
						alert("您点击了p标签！");
						$(this).hide();//this表示p标签本身
					});
				});
			</pre>
			
			<h2>1. 常用Jquery操作总结!!!</h2>
			<h3>1.获得元素的几种方式</h3>
			<pre>
				$(".class")//通过类获得
				$("#id")//通过id获得
				$("p")//通过标签获得
				$(this)//当前元素
			</pre>
			<br/>
			
			<h3>2.全选CheckBox</h3>
			<pre>
				$("#checkAll").click(function(){
					alert($("#checkAll").prop("checked"));
					$("input[name='hobby']").prop("checked",this.checked);
				});
				
				//全选、全反选
				function doSelectAll(){
					// jquery 1.6 前
					//$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));
					//prop jquery 1.6+建议使用
					$("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked"));		
				}
				
			</pre>
			<input type="checkbox" name="hobby" value="play"/>play
			<input type="checkbox" name="hobby" value="game"/>game
			<input type="checkbox" name="checkAll" id="checkAll" value="xyz"/>全选
			<br/>
			<br/>
			
			<h3>3.得到Select选择的Option</h3>
			<pre>
				//3. 获得 select 选的option信息
				$("#year").change(function(){
					alert(this.value);
				});
				//3.1 按钮点击事件获得select选择的值
				$("#getSelect").click(function(){
					var value = $("#year option:selected").val();
					alert(value);
				});
			</pre>
			<select id="year">
				<option id="one">2017</option><option id="two">2016</option><option id="three">2015</option>
			</select>
			<button id="getSelect">获得select的选择值</button>
			<br/><br/>
			
			<h3>3.得到Radio选择的Option</h3>
			<pre>
				function getRadio(){
					var gender = $("input[name='gender']:checked").val();
					alert(gender);
				}
			</pre>
			<div>
				<input type="radio" name="gender" value="男"/>男<br />
				<input type="radio" name="gender" value="女"/>女<br />
			</div>
			<button onclick="getRadio();">得到Radio</button>
			<script>
				function getRadio(){
					var gender = $("input[name='gender']:checked").val();
					alert(gender);
				}
				
			</script>
			
			<h3>4.遍历后台JSON的方法</h3>
			<pre>
				//2.1.2 使用$.index([被遍历的对象],function(index,user){ // ... })
				$.each("被遍历的json数组",function(index,"json数组中的对象"){
					// ...
				});
				
				例如:[msg:{'tag':'success',
					'userList':[
						{'name':'bart','xxx':'xxx'...},
						{'name':'bart','xxx':'xxx'...},
						...]}
					]的JSON
				$.each(msg.userList,function(index,user){
					emps.append('&lt;option value="' + user.name + '"/&gt;' + user.name +'&lt;option/&gt;');
				});
				
			</pre>
			<br/><br />
			
			<h3>5.使用$.ajax异步提交表单的方法</h3>
			<pre>
				// 异步提交表单的全部信息
				function addComplain(){
					$.ajax({
						type:"post",//提交方法类型
						url:"${basePath}/sys/home_addComplain.action",//地址
						data: $("#form").serialize(),//全部表单数据
						async:true,//是否异步提交,默认是true
						success : function(data){
							if(data != null ){
								if(data == "success"){
									//如果提交成功,就保存刷新父页面,并关闭当前页面
									alert("投诉成功!");
									//window.parent.location.reaload(true);//无效
									window.opener.parent.location.reload(true);
									window.close();
								}else{
									alert("提交投诉信息失败!");
								}
							}else{
								alert("提交投诉信息失败!");
							}
						},
						error : function(){
							alert("提交投诉信息失败!");
						}
					});
				} 	
				
			</pre>
			<br/><br/>
			
			<h3>6.刷新父窗口解决窗口嵌套问题</h3>
			<pre>
				//解决子框架嵌套的问题
				//如果当前登陆窗口的父窗口不是自己本身就表示被嵌套在另一个窗口中了,就需要刷新一次
				if(window != window.parent){
					window.parent.location.reload(true);
				}
				
				//刷新打开当前窗口的父窗口,例如:A窗口中打开的B,在B中使用改代码可以刷新A窗口
				window.close();//关闭当前窗口
				window.opener.parent.location.reload(true);//刷新打开当前窗口的父窗口
			</pre>			
			<br/>
			
			<h3>7.jsp的自动转发方式</h3>
			<pre>
		<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
		<% 
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
		//这里不要使用转发,因为一开手机进来没有response,跳转不过去
		response.sendRedirect(basePath + "sys/login_toLoginUI.action");
		%>
			</pre>
			
			<br/>
			
			<h3>8. JS操作Cookie </h3>
			<input type="text" id="cookieVal" />
			<button id="setCookie">添加输入值到Cookie</button>
			<button id="getCookie">得到Cookie中的值</button>
			<button id="delCookie">清空Cookie中的值</button>
			<script>
				//添加Cookie
				$("#setCookie").click(function(){
					var cv = $("#cookieVal").val();
					document.cookie += "cv="+cv+";";//固定格式,"name"="value"如果多个值使用";"来分割.
				});
				//得到Cookie
				$("#getCookie").click(function(){
					var cv = document.cookie;
					alert("Cookie的值:"+cv);
				});
				//删除Cookie
				$("#delCookie").click(function(){
					alert(document.cookie);
					document.cookie ="0-0";
					alert(document.cookie);
					console.log(document.cookie);	
				});
			</script>
			
			
			<br/><br/>
			
			
			
			<h2>2.DOM操作</h2>
			<h3>2.1三个属性</h3>
			<pre>
				$(selector).text();//设置或返回所有元素的文本内容
				$(selector).html();//设置或返回所选元素的内容包括html标签
				$(selector).val();//设置或返回单子段的值，例如&lt;input type="text"/&gt;
			</pre>
			<p id="pt"><span>测试</span>text()和html()和val()<b>三个方法</b></p>
			<input type="text" placeholder="输入文字" id="testVal"/>
			<input type="button" value="测试text()" id="text"/>
			<input type="button" value="测试html()" id="htm"/>
			<input type="button" value="测试val()" id="va"/>
			
			
			<h3>2.2 设置/获得 属性</h3>
			<a href="http://www.baidu.com" id="attr">百度官网</a>
			<input type="button" value="测试attr()" id="testAttr"/>
			
			<h3>2.3 添加元素</h3>
			<pre>
				$(selector).append([元素1][,元素2][,...]);//被选元素的内部的结尾添加元素
				$(selector).prepend();//被选元素的内部的开头添加元素
				$(selector).after();//被选元素的外部结尾开始添加元素
				$(selector).before();//被选元素的外部开头开始添加元素
			</pre>
			<div id="parOut">
				<div id="par" style="border:1px red solid;width: 300px;">
					<p id="parP1">第一行</p>
				</div>
			</div>
			
			<input type="button" value="点击在div内部开头添加元素" id="addElementBefore"/>
			<input type="button" value="点击在div内部结尾添加元素" id="addElementAfter"/>
			
			<input type="button" value="点击在-div-之前-添加元素" id="addBeforeDiv"/>
			<input type="button" value="点击在-div-之后-添加元素" id="addAfterDiv"/>
			
			<h3>2.4 删除元素</h3>
			<pre>
				$(selector).remove();//删除元素及其子元素
				$(selector).empty();//清空元素
			</pre>
			<input type="button" value="删除所有添加的元素" id="removeAll"/><br/>
			<input type="button" value="删除div内部-开头-添加的所有元素" id="removeInnerDivBefore"/>
			<input type="button" value="删除div内部-结尾-添加的所有元素" id="removeInnerDivAfter"/><br/>
			<input type="button" value="删除div外部-开头-添加的所有元素" id="removeOutDivBefore"/>
			<input type="button" value="删除div外部-结尾-添加的所有元素" id="removeOutDivAfter"/><br/>
			
			<h2> 3. CSS类</h2>
			<pre>
				$(selector).addClass([类1][,类2][,类3]);//添加样式
				$(selector).removeClass();//删除样式
				$(selector).toggleClass();//添加/删除样式
			</pre>
			<div id="cssDiv">
				<p id="cssP">123</p>
				<p id="cssP">456</p>
				<p id="cssP">789</p>
			</div>
			<input type="button" value="添加样式" id="addStyleCss"/>
			<input type="button" value="删除样式" id="delStyleCss"/>
			<input type="button" value="添加/删除样式" id="toggleStyleCss"/>
			
			<h2> 4. css()方法</h2>
			<pre>
				$(selector).css("css属性名");//得到css的对应属性的属性值
				$(selector).css("css属性名","属性值");//添加单个的属性值
				$(selector).css({"属性1":"属性值","属性2":"属性值"});//添加多个属性对应的属性值
			</pre>
			<div id="cssFunc" style="border: 1px red solid;background-color: yellow;width: 100px;height:100px;">
				
			</div>
			<input type="button" value="得到样式" id="getCss"/><input type="button" value="改变样式" id="setCss"/>
			
			<h2> 5.尺寸</h2>
			<pre>
				width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
				height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
				innerWidth() 方法返回元素的宽度（包括内边距）。
				innerHeight() 方法返回元素的高度（包括内边距）。
				outerWidth() 方法返回元素的宽度（包括内边距和边框）。
				outerHeight() 方法返回元素的高度（包括内边距和边框）。
				$(window).width();//返回窗口的宽度
				$(window).height();//返回窗口的高度
			</pre>
			
			<h2> 6. 遍历</h2>
			<h3> 6.1 祖先元素</h3>
			<pre>
				$(selector).parent();//方法返回被选元素的直接父元素
				$(selector).parents(["元素名"]);//方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (&lt;html&gt;),
												可以指定该元素的父元素。
				$(selector).parentsUntil(["给定元素"]);//方法返回介于两个给定元素之间的所有祖先元素。
			</pre>
			
			<h3> 6.2 后代元素</h3>
			<pre>
				$(selector).children(["指定子元素"]);//返回元素的<b>直接子元素</b>，可以<b>指定</b>子元素名称
				$(selector).find(["指定元素"]);//返回<b>后代元素</b>知道最后一个元素，可以指定后代元素的名字，
				$(selector).find(*);//返回所有后代元素
			</pre>
			
			
			<h3> 6.3 同胞元素</h3>
			<pre>
				$(selector).siblings(["指定元素名"]);//所有同胞元素，可指定元素名
				
				$(selector).next();//返回被选元素的下一个同胞元素
				$(selector).nextAll();//返回被选元素的所有跟随的元素
				$(selector).nextUntil(["指定元素"]);//返回被选元素的所有跟随元素直到指定元素
				
				
				//向前同胞元素，和上面的除了方向相反，其它的相同
				$(selector).prev();//
				$(selector).prevAll();// 
				$(selector).prevUntil() ;//

			</pre>
			
			
			<h3> 6.3 同胞元素</h3>
			<pre>
				$(selector).first();//方法返回被选元素的首个元素	
				$(selector).eq();//方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
				$(selector).filter("条件");//返回被选元素中满足条件的元素集合
				     例如：下面的例子返回带有类名 "intro" 的所有 <p> 元素：
					$(document).ready(function(){
					  $("p").filter(".intro");
					});

				$(selector).not("条件");//与filter相反
			</pre>
			
			<h2> 7.效果</h2>
			<h3>7.1 隐藏/显示效果</h3>
			<pre>
			    hide([speed][,callback]);//隐藏
			    show([speed][,callback]);//显示
			    toggle([speed][,callback]);//切换显示/隐藏
			          参数：
			          speed:速度，slow,fast或者ms数,100ms等.
			          callback:回调函数，当隐藏/显示方法执行完之后执行的函数
			</pre>
			
			<div id="sh" style="width:100px;height:50px;background-color:yellow;border: 1px red solid;"></div>
			<input type="button" value="隐藏" id="hideDiv"/>
			<input type="button" value="显示" id="showDiv"/>
			<input type="button" value="隐藏/显示" id="toggleDiv"/>
			
			<h3>7.2 淡入/淡出效果</h3>
			<pre>
				$(selector).fadeIn([speed][,callback]);//淡入函数
				    参数：
				    speed：速度fast或slow或100ms...
				    callback:回调函数
				$(selector).fadeOut([speed][,callback]);//淡出函数
				$(selector).fadeToggle([speed][,callback]);//切换淡入淡出
				$(selector).fadeTo([speed][,opacity][,callback]);//渐变为给定的不透明度
				  参数：
				    opacity:0~1之间0.3,0.5,0.6...
			</pre>
			
			<div id="io" style="width:100px;height:50px;background-color:yellow;border: 1px red solid;"></div>
			<input type="button" value="淡出" id="fadeOutDiv"/>
			<input type="button" value="淡入" id="fadeInDiv"/>
			<input type="button" value="淡入/淡出" id="fadeinoutDiv"/>
			<input type="button" value="淡入到" id="fadeToDiv"/>
			
			<h3>7.3 滑入/滑出效果</h3>
			<pre>
				$(selector).slideDown([speed][,callback]);//向下滑动
				$(selector).slideUp([speed][,callback]);//向上滑动
				$(selector).slideToggle([speed][,callback]);//上下滑动
			</pre>
			
			<div id="sx" style="width:100px;height:50px;background-color:yellow;border: 1px red solid;"></div>
			<input type="button" value="上滑" id="downDiv"/>
			<input type="button" value="下滑" id="upDiv"/>
			<input type="button" value="上/下滑动" id="downupDiv"/>
			
			<h3>7.4 动画效果</h3>
			<pre>
				$(selector).animate({params}[,speed][,callback]);//向下滑动
				$(selector).slideUp([speed][,callback]);//向上滑动
				$(selector).slideToggle([speed][,callback]);//上下滑动
				//可执行队列动画,要使用left或者right，必须给div设置position
			</pre>
			<div id="an" style="width: 100px;height: 100px;background-color: darkgoldenrod;position: relative;">
				DIV-ANIMATE
			</div>
			<input type="button" value="动画效果" id="anima"/>
			
			<h3>7.5 停止动画</h3>
			<pre>
				$(selector).stop([stopAll][,goToEnd]);
				参数：
				    stopAll:规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
				    goToEnd:规定是否立即完成当前动画。默认是 false。
			</pre>
			<input type="button" value="开始动画" id="animaStart"/>
			<input type="button" value="停止动画" id="animaStop"/>
			
			<h2>8. AJAX</h2>
			<h3>8.1 load()<h3>
			<pre>
		$(selector).load(URL,data,callback);
		参数:
			URL:必需的 URL 参数规定您希望加载/请求的的 URL地址。
			data:与请求一同发送的查询字符串键/值对集合,例如：var data={'time':new Date(),'xxx':'xxx'};
			callback(responseTxt,statusTXT,xhr):load() 方法完成后所执行的函数名称.
			    参数:
			    responseTxt:包含调用成功时的返回的结果内容
			    statusTXT:包含调用的状态 
			    xhr :包含 XMLHttpRequest 对象
			    	- 'success':ajax请求返回成功。
			    	- 'error':ajax请求失败
			</pre>
			
			<h3>8.2 get()<h3>
			<pre>
				$.get(URL,callback);
			</pre>	
			
			<h3>8.3 post()<h3>
			<pre>
				$.post(URL,data,callback);
			</pre>
			
			<h3>ajax典型写法</h3>
			<pre>
				var url = "xxx";
				var data = {"time":new Date(),"args":"argsValue"};//一般加上Date对象，防止浏览器缓存
				$.post(url,data,function(dataValue){
					//dataValue就是返回的值
				});
				
			</pre>
<!--======================================================================================================-->
		<hr/>
			<h3><font color="red">jQuery 效果函数</font></h3>
			<table border="1">
	<tr>
		<th>方法</th>
		<th>描述</th>
	</tr>

	<tr>
		<td>animate()</td>
		<td>对被选元素应用“自定义”的动画</td>
	</tr>

	<tr>
		<td>clearQueue()</td>
		<td>对被选元素移除所有排队的函数（仍未运行的）</td>
	</tr>

	<tr>
		<td>delay()</td>
		<td>对被选元素的所有排队函数（仍未运行）设置延迟</td>
	</tr>

	<tr>
		<td>dequeue()</td>
		<td>运行被选元素的下一个排队函数</td>
	</tr>

	<tr>
		<td>fadeIn()</td>
		<td>逐渐改变被选元素的不透明度，从隐藏到可见</td>
	</tr>

	<tr>
		<td>fadeOut()</td>
		<td>逐渐改变被选元素的不透明度，从可见到隐藏</td>
	</tr>

	<tr>
		<td>fadeTo()</td>
		<td>把被选元素逐渐改变至给定的不透明度</td>
	</tr>

	<tr>
		<td>hide()</td>
		<td>隐藏被选的元素</td>
	</tr>

	<tr>
		<td>queue()</td>
		<td>显示被选元素的排队函数</td>
	</tr>

	<tr>
		<td>show()</td>
		<td>显示被选的元素</td>
	</tr>

	<tr>
		<td>slideDown()</td>
		<td>通过调整高度来滑动显示被选元素</td>
	</tr>

	<tr>
		<td>slideToggle()</td>
		<td>对被选元素进行滑动隐藏和滑动显示的切换</td>
	</tr>

	<tr>
		<td>slideUp()</td>
		<td>通过调整高度来滑动隐藏被选元素</td>
	</tr>

	<tr>
		<td>stop()</td>
		<td>停止在被选元素上运行动画</td>
	</tr>

	<tr>
		<td>toggle()</td>
		<td>对被选元素进行隐藏和显示的切换</td>
	</tr>
</table>
<!--======================================================================================================-->
<hr/>
<h2><font color="red">jQuery 选择器</font></h2>

<table border="1">
	<tr>
		<th>选择器</th>
		<th>实例</th>
		<th>选取</th>
	</tr>

	<tr>
		<td><a href="selector_all.asp" title="jQuery * 选择器">*</a></td>
		<td>$(&quot;*&quot;)</td>
		<td>所有元素</td>
	</tr>

	<tr>
		<td><a href="selector_id.asp" title="jQuery # 选择器">#<i>id</i></a></td>
		<td>$(&quot;#lastname&quot;)</td>
		<td>id=&quot;lastname&quot; 的元素</td>
	</tr>

	<tr>
		<td><a href="selector_class.asp" title="jQuery . 选择器">.<i>class</i></a></td>
		<td>$(&quot;.intro&quot;)</td>
		<td>所有 class=&quot;intro&quot; 的元素</td>
	</tr>

	<tr>
		<td><a href="selector_element.asp" title="jQuery element 选择器"><i>element</i></a></td>
		<td>$(&quot;p&quot;)</td>
		<td>所有 &lt;p&gt; 元素</td>
	</tr>

	<tr>
		<td>.<i>class</i>.<i>class</i></td>
		<td>$(&quot;.intro.demo&quot;)</td>
		<td>所有 class=&quot;intro&quot; 且 class=&quot;demo&quot; 的元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_first.asp" title="jQuery :first 选择器">:first</a></td>
		<td>$(&quot;p:first&quot;)</td>
		<td>第一个 &lt;p&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_last.asp" title="jQuery :last 选择器">:last</a></td>
		<td>$(&quot;p:last&quot;)</td>
		<td>最后一个 &lt;p&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_even.asp" title="jQuery :even 选择器">:even</a></td>
		<td>$(&quot;tr:even&quot;)</td>
		<td>所有偶数 &lt;tr&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_odd.asp" title="jQuery :odd 选择器">:odd</a></td>
		<td>$(&quot;tr:odd&quot;)</td>
		<td>所有奇数 &lt;tr&gt; 元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_eq.asp" title="jQuery :eq() 选择器">:eq(<i>index</i>)</a></td>
		<td>$(&quot;ul li:eq(3)&quot;)</td>
		<td>列表中的第四个元素（index 从 0 开始）</td>
	</tr>

	<tr>
		<td><a href="selector_gt.asp" title="jQuery :gt 选择器">:gt(<i>no</i>)</a></td>
		<td>$(&quot;ul li:gt(3)&quot;)</td>
		<td>列出 index 大于 3 的元素</td>
	</tr>

	<tr>
		<td><a href="selector_lt.asp" title="jQuery :lt 选择器">:lt(<i>no</i>)</a></td>
		<td>$(&quot;ul li:lt(3)&quot;)</td>
		<td>列出 index 小于 3 的元素</td>
	</tr>

	<tr>
		<td>:not(<i>selector</i>)</td>
		<td>$(&quot;input:not(:empty)&quot;)</td>
		<td>所有不为空的 input 元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_header.asp" title="jQuery :header 选择器">:header</a></td>
		<td>$(&quot;:header&quot;)</td>
		<td>所有标题元素 &lt;h1&gt; - &lt;h6&gt;</td>
	</tr>

	<tr>
		<td><a href="selector_animated.asp" title="jQuery :animated 选择器">:animated</a></td>
		<td>&nbsp;</td>
		<td>所有动画元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_contains.asp" title="jQuery :contains 选择器">:contains(<i>text</i>)</a></td>
		<td>$(&quot;:contains('W3School')&quot;)</td>
		<td>包含指定字符串的所有元素</td>
	</tr>

	<tr>
		<td><a href="selector_empty.asp" title="jQuery :empty 选择器">:empty</a></td>
		<td>$(&quot;:empty&quot;)</td>
		<td>无子（元素）节点的所有元素</td>
	</tr>

	<tr>
		<td>:hidden</td>
		<td>$(&quot;p:hidden&quot;)</td>
		<td>所有隐藏的 &lt;p&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_visible.asp" title="jQuery :visible 选择器">:visible</a></td>
		<td>$(&quot;table:visible&quot;)</td>
		<td>所有可见的表格</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td>s1,s2,s3</td>
		<td>$(&quot;th,td,.intro&quot;)</td>
		<td>所有带有匹配选择的元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_attribute.asp" title="jQuery [attribute] 选择器">[<i>attribute</i>]</a></td>
		<td>$(&quot;[href]&quot;)</td>
		<td>所有带有 href 属性的元素</td>
	</tr>

	<tr>
		<td><a href="selector_attribute_equal_value.asp" title="jQuery [attribute=value] 选择器">[<i>attribute</i>=<i>value</i>]</a></td>
		<td>$(&quot;[href='#']&quot;)</td>
		<td>所有 href 属性的值等于 &quot;#&quot; 的元素</td>
	</tr>

	<tr>
		<td><a href="selector_attribute_notequal_value.asp" title="jQuery [attribute!=value] 选择器">[<i>attribute</i>!=<i>value</i>]</a></td>
		<td>$(&quot;[href!='#']&quot;)</td>
		<td>所有 href 属性的值不等于 &quot;#&quot; 的元素</td>
	</tr>

	<tr>
		<td><a href="selector_attribute_end_value.asp" title="jQuery [attribute$=value] 选择器">[<i>attribute</i>$=<i>value</i>]</a></td>
		<td>$(&quot;[href$='.jpg']&quot;)</td>
		<td>所有 href 属性的值包含以 &quot;.jpg&quot; 结尾的元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_input.asp" title="jQuery :input 选择器">:input</a></td>
		<td>$(&quot;:input&quot;)</td>
		<td>所有 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_text.asp" title="jQuery :text 选择器">:text</a></td>
		<td>$(&quot;:text&quot;)</td>
		<td>所有 type=&quot;text&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_password.asp" title="jQuery :password 选择器">:password</a></td>
		<td>$(&quot;:password&quot;)</td>
		<td>所有 type=&quot;password&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_radio.asp" title="jQuery :radio 选择器">:radio</a></td>
		<td>$(&quot;:radio&quot;)</td>
		<td>所有 type=&quot;radio&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_checkbox.asp" title="jQuery :checkbox 选择器">:checkbox</a></td>
		<td>$(&quot;:checkbox&quot;)</td>
		<td>所有 type=&quot;checkbox&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_submit.asp" title="jQuery :submit 选择器">:submit</a></td>
		<td>$(&quot;:submit&quot;)</td>
		<td>所有 type=&quot;submit&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_reset.asp" title="jQuery :reset 选择器">:reset</a></td>
		<td>$(&quot;:reset&quot;)</td>
		<td>所有 type=&quot;reset&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_button.asp" title="jQuery :button 选择器">:button</a></td>
		<td>$(&quot;:button&quot;)</td>
		<td>所有 type=&quot;button&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_image.asp" title="jQuery :image 选择器">:image</a></td>
		<td>$(&quot;:image&quot;)</td>
		<td>所有 type=&quot;image&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_file.asp" title="jQuery :file 选择器">:file</a></td>
		<td>$(&quot;:file&quot;)</td>
		<td>所有 type=&quot;file&quot; 的 &lt;input&gt; 元素</td>
	</tr>

	<tr>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
		<td style="background-color:#fff;">&nbsp;</td>
	</tr>

	<tr>
		<td><a href="selector_input_enabled.asp" title="jQuery :enabled 选择器">:enabled</a></td>
		<td>$(&quot;:enabled&quot;)</td>
		<td>所有激活的 input 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_disabled.asp" title="jQuery :disabled 选择器">:disabled</a></td>
		<td>$(&quot;:disabled&quot;)</td>
		<td>所有禁用的 input 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_selected.asp" title="jQuery :selected 选择器">:selected</a></td>
		<td>$(&quot;:selected&quot;)</td>
		<td>所有被选取的 input 元素</td>
	</tr>

	<tr>
		<td><a href="selector_input_checked.asp" title="jQuery :checked 选择器">:checked</a></td>
		<td>$(&quot;:checked&quot;)</td>
		<td>所有被选中的 input 元素</td>
	</tr>
</table>
		
	
	
	<fieldset>
	<legend>测试指派聚角色到用户</legend>
	<!-- <form action="${pageContext.request.contextPath}/role_view/assigRoleByUser.do" method="get"> -->
		<table id="assinTab">
			<tr><th>用户</th><th colspan="3">角色</th></tr>
			<tr>
				<td>test1<input type="checkbox" value="8"></td>
				<td>操作员<input type="checkbox" value="2"></td>
				<td>测试角色1<input type="checkbox" value="7"></td>
				<td>测试角色2<input type="checkbox" value="8"></td>
			</tr>
			<tr>
				<td>test2<input type="checkbox" value="9"></td>
				<td>操作员<input type="checkbox" value="2"></td>
				<td>测试角色1<input type="checkbox" value="7"></td>
				<td>测试角色2<input type="checkbox" value="8"></td>
			</tr>
			<tr>
				<td>test3<input type="checkbox" value="10"></td>
				<td>操作员<input type="checkbox" value="2"></td>
				<td>测试角色1<input type="checkbox" value="7"></td>
				<td>测试角色2<input type="checkbox" value="8"></td>
			</tr>
			<tr>
				<td>test4<input type="checkbox" value="11"></td>
				<td>操作员<input type="checkbox" value="2"></td>
				<td>测试角色1<input type="checkbox" value="7"></td>
				<td>测试角色2<input type="checkbox" value="8"></td>
			</tr>
		</table>
		<input type="button" name="添加" value="提交" id="assign"/><br />
	<!-- </form> -->
</fieldset>
<script type="text/javascript">
	//点击提交按钮
	$("#assign").click(function(){
		var ids = new Array();
		//获得tr的集合
		var trList = $("#assinTab").find("tr");
		for(var i = 1; i < trList.length ; i++){
			//获得td的集合
			var tdArr = trList.eq(i).find("td");
			var idStr = "";
			for(var j = 0 ; j < tdArr.length; j++){
				//获得checkbox的集合
				var checkBox = tdArr.eq(j).find("input[type=checkbox]");
				if(checkBox[0].checked == true){
					idStr = idStr + checkBox[0].value+"@true"+",";//拼接id字符串
				}else{
					idStr = idStr + checkBox[0].value+"@false"+",";//拼接id字符串
				}
			}
			idStr = idStr.substring(0,idStr.lastIndexOf(","));//去掉最后一个","
			ids = ids + idStr +"#";//拼接id数组使用"#"做分隔符
		}
		ids = ids.substring(0,ids.lastIndexOf("#"));//去掉最后一个"#"
		console.log(ids);
		
		//ajax请求
		$.ajax({
			url:"${pageContext.request.contextPath}/role_view/assigRoleByUser.do",
			data:{"ids[]":ids,"time":new Date()},
			type:"get",
			success:function(data){
				console.log(data);
			}
		});
		
	});
</script>
	
</div>
		
		
	
		
	</body>
</html>
